<template>
<!-- 注册登录页 -->
	<div id="ULogin">
		<van-icon name="arrow-left" color="#000" size="1.5em" @click="backup" class="backup"/>
		<div class="title">达达外卖</div>
		<div class="Tabs">
			<div class="tabItem" @click="curTab='dx'" :class="{cur:curTab=='dx'}">短信登录</div>
			<div class="tabItem" @click="curTab='mm'" :class="{cur:curTab=='mm'}">密码登录</div>
			<div class="tabItem" @click="curTab='zc'" :class="{cur:curTab=='zc'}">注册账号</div>
		</div>
		<div class="form">
			<div v-show="curTab=='dx'">
				<div class="sjh">
					<input type="text" placeholder="手机号" v-model="form.loginUstr">
					<div class="text">发送验证码</div>
				</div>
				<input type="text" placeholder="验证码" v-model="form.yzmCode">
			</div>
			<div v-show="curTab=='mm'">
				<input type="text" placeholder="手机号或用户名" v-model="form.loginUstr">
				<input type="password" placeholder="密码" v-model="form.pStr">
			</div>
			<div v-show="curTab=='zc'">
				<input type="text" placeholder="用户名" v-model="form.loginUstr">
				<input type="password" placeholder="密码" v-model="form.pStr">
				<input type="text" v-model="form.phone" placeholder="手机号">
			</div>
			<div class="Login" @click="Login" v-show="curTab=='dx'||curTab=='mm'">登录</div>
			<div class="Login" @click="Reg" v-show="curTab=='zc'">注册</div>
			<div class="gyMe">关于我们</div>
		</div>
	</div>	
</template>

<script>
import { mapActions } from 'vuex'
	export default {
		data() {
			return {
				curTab:"dx",
				form:{
					loginUstr:"",
					pStr:"",
					yzmCode:"",
					phone:""
				}
			}
		},
		methods:{
			...mapActions(["UserReg"]),
			async Login(){
				if(this.curTab=='dx'){
					delete this.form.pStr
					delete this.form.phone
					this.$dialog.alert({
						title:"提示",
						message:"待开发",
						confirmButtonColor:"#3FC46D"
					})
					return
				}
				if(this.curTab=='mm'){
					delete this.form.yzmCode
					delete this.form.phone
				}
				if(this.Form.checkForm(this.form)){
					const {pStr} = this.form
					const formData={}
					// 整理数据表单结构
					for(let key in this.form){
						if(key=="pStr"){
							formData[key]=this.md5(pStr)
						}else {
							formData[key]=this.form[key]
						}
					}
					const result=await this.$store.dispatch("UserLogin",formData)
					if(result){
						this.$dialog.alert({
							title:"登录成功",
							message:"点击确定后跳转到首页",
							confirmButtonColor:"#3FC46D"
						}).then(()=>{
							this.$router.push("/home/index")
						})
					}else {
						this.$dialog.alert({
							title:"登录失败",
							message:"用户名或密码错误，重新登录",
							confirmButtonColor:"#3FC46D"
						})
					}
				}else {
					this.$dialog.alert({
						title:"提示",
						message:"你的表单还未填写完毕",
						confirmButtonColor:"#3FC46D"
					})
				}
			},
			// 注册
			async Reg(){
				if(this.curTab=='zc'){
					delete this.form.yzmCode
				}
				if(this.Form.checkForm(this.form)){
					// 整理数据
					const formData={}
					for(let key in this.form){
						formData[key]=this.form[key]
						if(key=='pStr'){
							formData[key]=this.md5(this.form[key])
						}
					}
					const result=await this.UserReg(formData)
					if(result===true){
						this.form=this.Form.cleanForm(this.form)
						this.$dialog.alert({
							message:"注册成功",
							confirmButtonColor:"#3FC46D"
						}).then(()=>{
							this.curTab='mm'
						})
					}else if(result==301){
						this.$dialog.alert({
							message:"登录用户名已存在，请更换重试",
							confirmButtonColor:"#3FC46D"
						})
					}
				}else {
					this.$dialog.alert({
						message:"表单填写不完整，提交失败",
						confirmButtonColor:"#3FC46D"
					})
				}
			},
			backup(){
				this.$router.go(-1)
			}
		},
		watch:{
			curTab(){
				for(let key in this.form){
					this.form[key]=""
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
@import "../scss/GLOBAL.scss";
#ULogin {
	height: 100%;
	padding: 0 3.10em;
	user-select: none;
	.title {
		text-align: center;
		padding: 3em 0;
		font-size: 2em;
		color:$themeColor;
		font-weight: bold;
	}
	.Tabs {
		.tabItem {
			border-bottom: 3px solid transparent;
			&.cur {
				border-color: $themeColor;
				color: $themeColor;
			}	
		}
	}
	.form {
		input {
			border-radius: 6px;
			padding:.8em 1.25em;
			margin-bottom: 1.25em;
			width: 100%;
			font-size: .9em;
		}
		.sjh {
			position: relative;
			.text {
				font-size: .9em;
				color:#ccc;
				position:absolute;
				top: calc(50% - 1.25em);
				right: 10px;
			}
			input {
				padding-right: 6.25em;
			}
		}
		.Login {
			text-align: center;
			background-color: $lightGreen;
			color: #fff;
			border-radius: $borderRadius;
			padding: 7px 0;
			letter-spacing:2px;
		}
		.gyMe {
			text-align: center;
			font-size: .9em;
			color: #ccc;
			padding: 1em 0;
		}
	}
	.backup {
		position: absolute;
		top: 10px;
		left: 5px;
	}
}
</style>